<template>
  <div>
    <Headline
      :headline1="$t('m.AccessAdmin') + '  /  '"
      :headline2="$t('m.IncidentRecord')"
    ></Headline>
    <a-card style="width: 100%">
      <a-table
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="data"
        :pagination="false"
        bordered
      >
        <div slot="index" slot-scope="text, tags, i">
          {{ i + 1 }}
        </div>
        <div slot="show" slot-scope="text, tags, i">
          <a-button @click="show(text, tags, i)">{{
            $t("m.Examine")
          }}</a-button>
        </div>
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="setPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChange"
      />
    </a-card>
    <a-modal
      :title="$t('m.DiscernRecord')"
      width="1200px"
      :visible="visible"
      @cancel="handleCancel"
      :footer="null"
    >
      <a-range-picker
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['Start Time', 'End Time']"
        @ok="timeOk"
        style="margin-right: 20px"
      />
      <a-input-search
        placeholder="姓名查询"
        v-model="forminitialA.key"
        style="width: 200px; margin-right: 20px"
        enter-button
        @search="onSearch"
      />
      <a-button type="primary" @click="moreCha">{{
        $t("m.MoreQueries")
      }}</a-button>
      <a-table
        :columns="innerColumns"
        :rowKey="(record, i) => i"
        :data-source="innerData"
        :pagination="false"
      >
        <div slot="joinBlack" slot-scope="text, tags, i">
          <a
            @click="joinBlack(text, tags, i)"
            type="primary"
            style="margin-right: 10px"
            >{{ $t("m.blacklist") }}</a
          >
        </div>
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="totalA"
        @change="setPagesA"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChangeA"
      />
    </a-modal>
    <a-modal
      :title="$t('m.DiscernRecord')"
      :visible="visibleA"
    :cancelText="$t('m.Cancel')"
      :okText="$t('m.Ok')"
      @cancel="handleCancelA"
      @ok="moreshow"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item :label="$t('m.jobnumber')">
          <a-input v-model="forminitialA.staffOrStuCode" />
        </a-form-item>
        <a-form-item :label="$t('m.CardNumber')">
          <a-input v-model="forminitialA.cardNo" />
        </a-form-item>
        <a-form-item :label="$t('m.remark')">
          <a-input v-model="forminitialA.eventDes" />
        </a-form-item>
      </a-form>
    </a-modal>
    <Delete ref="joinBlack" :dalete="joinList" @confirm="joinOk"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Delete from "@/components/Delete";
import { getDeviceList } from "@/api/faceRecognition";
import { getEventList, addBlackName } from "@/api/entrance/cloudDoor";
export default {
  name: "Funcrecord",
  components: {
    Headline,
    Delete,
  },
  data() {
    return {
      joinList: {
        titles: this.$t("m.AddingToTheBlacklist"),
        type: "warning",
        text: this.$t("m.ConfirmAddingToTheBlacklist"),
      },
      visibleA: false,
      totalA: 0,
      innerData: [],
      visible: false,
      forminitial: {
        start: 0,
        limit: 10,
        devClass: 2,
        page: 1,
      },
      data: [],
      columns: [
        {
          title: this.$t("m.SerialNumber"),
          scopedSlots: { customRender: "index" },
        },
        { title: this.$t("m.deviceNumber"), dataIndex: "machineid" },
        { title: this.$t("m.Name"), dataIndex: "devname" },
        {
          title: this.$t("m.Operation"),
          scopedSlots: { customRender: "show" },
        },
      ],
      total: 0,
      forminitialA: {
        machineId: "",
        startDate: "2020-12-31 00:00:00",
        endDate: "2022-01-07 23:59:59",
        key: "",
        staffOrStuCode: "",
        cardNo: "",
        eventDas: "",
        start: 0,
        limit: 10,
        page: 1,
      },
      innerColumns: [
        { title: this.$t("m.EventTime"), dataIndex: "eventtime" },
        { title: this.$t("m.TimeType"), dataIndex: "eventtype" },
        { title: this.$t("m.CardNumber"), dataIndex: "cardno" },
        { title: this.$t("m.jobnumber"), dataIndex: "stafforstucode" },
        { title: this.$t("m.Name"), dataIndex: "stafforstuname" },
        { title: this.$t("m.AffiliatedUnit"), dataIndex: "devname" },
        { title: this.$t("m.deviceNumber"), dataIndex: "machineid" },
        { title: this.$t("m.ReadHead"), dataIndex: "readheadername" },
        { title: this.$t("m.remark"), dataIndex: "eventdes" },
        {
          title: this.$t("m.Operation"),
          scopedSlots: { customRender: "joinBlack" },
        },
      ],
      cardNos: "",
    };
  },
  created() {
    this._getDeviceList();
  },
  methods: {
    moreCha() {
      this.visibleA = true;
    },
    handleCancelA() {
      this.visibleA = false;
    },
    moreshow() {
      this._getEventList();
      this.visibleA = false;
    },
    onSearch() {
      this._getEventList();
    },
    timeOk(e) {
      //   console.log('a')
      this.forminitialA.startDate = this.$moment(e[0]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this.forminitialA.endDate = this.$moment(e[1]._d).format(
        "YYYY-MM-DD hh:mm:ss"
      );
      this._getEventList();
    },
    joinOk() {
      addBlackName({ cardNos: this.cardNos })
        .then((res) => {
          if (res.data.success == true) {
            this.$message.success(res.data.msg);
          }
          if (res.data.success == false) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败");
        });
      this.$refs.joinBlack.visible = false;
    },
    joinBlack(text, tags, i) {
      this.$refs.joinBlack.visible = true;
      this.cardNos = tags.cardno;
    },
    _getEventList() {
      getEventList({ params: this.forminitialA }).then((res) => {
        this.totalA = res.data.total;
        this.innerData = res.data.data;
        console.log(res);
      });
    },
    setShowSizeChangeA(page, limit) {
      this.forminitialA.page = page;
      this.forminitialA.limit = limit;
      this.forminitialA.start = (page - 1) * limit;
      this._getEventList();
    },
    setPagesA(page, pageSize) {
      this.forminitialA.page = page;
      this.forminitialA.limit = pageSize;
      this.forminitialA.start = (page - 1) * pageSize;
      this._getEventList();
    },
    handleCancel() {
      this.visible = false;
    },
    show(text, tags, i) {
      console.log(tags);
      this.visible = true;
      this.forminitialA.machineId = tags.machineid;
      this._getEventList();
    },
    setShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPages(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
    onSelectChange(selectedRowKeys, selectedRows) {},
    _getDeviceList() {
      getDeviceList({ params: this.forminitial })
        .then((res) => {
          this.total = res.data.total;
          this.data = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>